<template>
	<div>
		<Tree :data="data5" :render="renderContent" :load-data="loadData" @on-contextmenu="handleContextMenu" class="demo-tree-render">

			<template slot="contextMenu">
				<DropdownItem @click.native="handleContextMenuEdit">编辑</DropdownItem>
				<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
			</template>

		</Tree>
		<Modal v-model="modal1" title="" :closable="false" footer-hide	>
				<theForm v-if="modal1"  :contextData="contextData" @on-cancel="cancel"></theForm>
		</Modal>
	</div>
</template>
<script>
	import {
		category,
		categorydetail
	} from "@/api/index.js"
	import theForm from "./form.vue"
	class main {
		constructor(id, title) {
			this.id = id
			this.title = title
			this.contextmenu = true
		}
	}
	export default {
		components: {
			theForm
		},
		data() {
			return {
				modal1: false,
				contextData:{},
				data5: [{
					title: '商品分类',
					loading: false,
					render: (h, {
						root,
						node,
						data
					}) => {
						return h('span', {
							style: {
								display: 'inline-block',
								width: '100%'
							}
						}, [
							h('span', [
								h('Icon', {
									props: {
										type: 'ios-folder-outline'
									},
									style: {
										marginRight: '8px'
									}
								}),
								h('span', data.title)
							]),
							h('span', {
								style: {
									display: 'inline-block',
									float: 'right',
									marginRight: '32px'
								}
							}, [
								h('Button', {
									props: Object.assign({}, this.buttonProps, {
										type: 'primary'
									}),
									style: {
										// width: '64px'
									},
									on: {
										click: () => {
											this.append({})
										}
									}
								}, '添加分类')
							])
						]);
					},
					children: []
				}],
				categoryList: [],
				buttonProps: {
					type: 'default',
					size: 'small',
				}
			}
		},
		methods: {
			ok() {},
			cancel() {
				this.modal1 = false
				this.contextData = {};
			},
			handleContextMenu(data) {
				this.contextData = data;
			},
			handleContextMenuEdit() {
				this.append(this.contextData)
			},
			handleContextMenuDelete() {
				this.remove(this.contextData)
			},
			renderContent(h, {
				root,
				node,
				data
			}) {
				return h('span', {
					style: {
						display: 'inline-block',
						width: '100%'
					}
				}, [
					h('span', {
						attrs: {
							size: "large"
						},
						style: {
							marginRight: '20px'
						},

					}, data.title),
					h('span', {
						style: {
							display: 'inline-block',
							float: 'right',
							display: 'flex',
							'align-items': 'center',
							marginRight: '32px'
						}
					}, [

						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'md-hammer'
							}),
							style: {
								marginRight: '20px'
							},
							on: {
								click: () => {
									this.append(data)
								}
							}
						}),
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'md-trash'
							}),
							on: {


								click: () => {
									this.remove(data)
								}
							}
						})
					])
				]);
			},
			append(data) {
				categorydetail({
					id: data.id
				}).then(res => {
					this.contextData = res.data;
					this.modal1 = true
				})
			},
			remove(root, node, data) {
				this.contextData = data;
				// const parentKey = root.find(el => el === node).parent;
				// const parent = root.find(el => el.nodeKey === parentKey).node;
				// const index = parent.children.indexOf(data);
				// parent.children.splice(index, 1);
			},
			loadData(item, callback) {
				var data = {
					pageSize: 5000
				}
				category(data).then(res => {
					this.categoryList = res.data
					const list = this.setcategory()
					callback(list);
				})
			},
			setcategory() {
				var list = JSON.parse(JSON.stringify(this.categoryList))
				var reslist = []
				var b = setok(list)
				b.forEach(val => {
					val.children = setok(list, val.id)
				})

				function setok(list, id = 0) {
					var data = []
					list.forEach(val => {
						if (val.parent_id == id) {
							var obj = new main(val.id, val.title)
							if (id == 0) {
								obj.children = []
							}
							data.push(obj)
						}
					})
					return data
				}
				return b
			},
			category() {

			},
		},
		mounted() {
			this.category()
		}
	}
</script>
<style>
	.demo-tree-render .ivu-tree-title {
		width: 100%;
	}

	a {}
</style>
